<!DOCTYPE html>
<!-- 
	window.open('./vote.html', "window_name", "width950,height=700,scrollbars=yes");
-->
<html>
<head> 
	<title></title> 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script src="http://www.google.com/jsapi"></script>
	<link rel="stylesheet" href="jquery-ui-1.8.14.custom.css" type="text/css" />
	<link type="text/css" rel="stylesheet" href="./css/main.css" />
<script>
	google.load("jquery", "1.6.2");
	google.load("jqueryui", "1.8.0");
</script>
<script> 
	var update;
	var start1;
	var start2;
	var to_comma = function(from){
		var to = String(from);
		var tmp = "";
		while (to != (tmp = to.replace(/^([+-]?\d+)(\d\d\d)/,"$1,$2"))){
			to = tmp;
		}
		return to;
	};
	$(function() {
		var left = 1800;
		var right = 2500;
		var value = (left * 100 / (left + right));
		var delta;
		var step;
		var progressbar = $( "#progressbar" ).progressbar({
			value: value
		});
		$('#votebutton1').click(function(){
			var val = $('#design01').val();
			var _d = parseInt(val);
			if (!isNaN(_d)){
				delta = _d;
				step = Math.floor(delta / 10);
				if (step < 0){ step = delta; }
				start1();
				$('#design01').val('');
			}
		});
		$('#votebutton2').click(function(){
			var val = $('#design01').val();
			var _d = parseInt(val);
			if (!isNaN(_d)){
				delta = _d;
				step = Math.floor(delta / 10);
				if (step < 0){ step = delta; }
				start2();
				$('#design01').val('');
			}
		});
		start1 = function(){
			if(delta && 0 < delta){
				left += step;
				value = (left * 100 / (left + right));
				update();
				setTimeout('start1()',100);
				delta -= step;
			}
		};
		start2 = function(){
			if(delta && 0 < delta){
				right += step;
				value = (left * 100 / (left + right));
				update();
				setTimeout('start2()',100);
				delta -= step;
			}
		};
		
		update = function(){
			progressbar.progressbar("value",value);
			$('#pointleftnumber').text(to_comma(left));
			$('#pointrightnumber').text(to_comma(right));
		};
		update();
	});
</script> 

<style type="text/css">
#bg_container{
	width: 900px;
}
#votetitle{
	text-shadow: 5px 5px 20px gray;
	color: darkred;
	font-size: 30px;
	font-weight: bold;
	font-family: Verdana, Helvetica, sans-serif;
	text-align:center;
}
#picture{
	margin:10px auto 0 auto;
	padding:0;
	width: 80%;
}
#pictureleft{
	width:45%;
	text-align:center;
	vertical-align:middle;
}
#picturecenter{
	padding-bottom:10px;
	width:10%;
	font-size:3em;
	text-align:center;
	vertical-align:bottom;
	color: #666;
}
#pictureright{
	width:45%;
	text-align:center;
	vertical-align:middle;
}
.pictureimage{
	width:200px;

	box-shadow:3px 4px 3px 1px rgba(0,0,0,0.5);
	-moz-box-shadow:3px 4px 3px 1px rgba(0,0,0,0.5);
	-webkit-box-shadow:3px 4px 3px 1px rgba(0,0,0,0.5);
}
#picturelefttitle{
	font-size:1.5em;
	color:red;
}
#picturerighttitle{
	font-size:1.5em;
	color:blue;
}
#progress{
	margin:15px auto 0 auto;
	padding:0;
	width: 80%;
}
#point{
	margin:5px auto 0 auto;
	padding:0;
	width: 80%;
}
#pointleft{
	font-size: 1.5em;
}
#pointleftnumber{
	font-size:1.1em;
	color:red;
}
#pointright{
	font-size: 1.5em;
	text-align:right;
}
#pointrightnumber{
	font-size:1.1em;
	color:blue;
}

#form{
	margin:0px auto 0 auto;
	padding:0 auto 0 auto;
	width: 80%;
	text-align:center;
}
#formpoint{
	font-size: 1.5em;
}

button.css3button1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffffff;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#ff42aa 0%,
		#660033);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#ff42aa),
		to(#660033));
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border: 1px solid #660033;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.7),
		0px 1px 0px rgba(255,255,255,0.3);
	font-size:1.2em;
}

button.css3button2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffffff;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#42aaff 0%,
		#003366);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#42aaff),
		to(#003366));
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border: 1px solid #003366;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.5);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.7),
		0px 1px 0px rgba(255,255,255,0.3);
	font-size:1.2em;
}

#close{
	margin:20px auto 0 auto;
	padding:0 auto 0 auto;
	width: 80%;
	text-align:center;
}

button.css3button3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffffff;
	padding: 10px 20px;
	background: -moz-linear-gradient(
		top,
		#a3a3a3 0%,
		#3b3b3b 50%,
		#242424 50%,
		#000000);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#a3a3a3),
		color-stop(0.50, #3b3b3b),
		color-stop(0.50, #242424),
		to(#000000));
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border: 1px solid #000000;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.6);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.6);
	text-shadow:
		0px -1px 0px rgba(000,000,000,1),
		0px 1px 0px rgba(255,255,255,0.2);
}



.textbox {
  height: 2em;
  width: 200px;
  padding: 0 5px;
  font-size: 20px;
}

#design01 {
  background: #D9F5FF;
  border: solid 5px #29ABE2;
  font-weight: bold;
  color: #29ABE2;
}
#design01:focus {
  background: #FFEF94;
}

#progressbar{
	background: #F6A828 url(images/ui-bg_gloss-wave_35_f6a828_500x100_2.png) 50% 50% repeat-x;
	border: 1px solid #008F08;
}
</style>

</head> 
<body> 

<div id="container">

<!--
	<div id="header"></div>
	<div id="menu"></div>
-->
	<div id="content">

		<div id="bg_container">

			<div id="votetitle">
				これからの売り出し方は？
			</div>

			<table id="picture">
				<tr>
					<td id="pictureleft">
						<div id="picturelefttitle">眼鏡</div>
						<img class="pictureimage" src="./images/IMG_1401_s.jpg" />
					</td>
					<td id="picturecenter">or</td>
					<td id="pictureright">
						<div id="picturerighttitle">そのまま</div>
						<img class="pictureimage" src="./images/IMG_1417_s.jpg" />
					</td>
				</tr>
			</table>

			<div id="progress">
				<div id="progressbar"></div> 
			</div>

			<table id="point">
				<tr>
					<td id="pointleft"><span id="pointleftnumber">100</span> point</td>
					<td id="pointright"><span id="pointrightnumber">200</span> point</td>
				</tr>
			</table>

			<div id="form">
				<span id="formpoint">ポイントを投票する</span>
				<br />
				<input type="text" class="textbox" id="design01" name="design01" />
				<br />
				<button type="button" id="votebutton1" name="" value="" class="css3button1">投票</button>
				<span>
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				</span>
				<button type="button" id="votebutton2" name="" value="" class="css3button2">投票</button>
			</div>

			<div id="close">
				<button type="button" onclick="window.close();" name="" value="" class="css3button3">閉じる</button>
			</div>
			<br />

		</div>
	</div>

<!--
	<div id="footer"></div>
-->

</div>

</body> 
</html> 